<template>
    <div class="login">
     <div class="home-header">
         <h3>饭了么</h3>
     </div>
     <div class="middle">
       <h2>欢迎使用</h2><h2 style="color: #0d66e3;">饭了么</h2>
       <p>登陆后即可进行管理</p>
       <img src="@/assets/tubiao.png">
       <br>
       <van-field v-model="account" label="邮箱:" placeholder="请输入邮箱" />
       <van-field v-model="password" label="密码:"  placeholder="请输入密码"/>
     </div>
     <div class="bottom">
      <van-button  type="primary" round  color="#0a87f5"  @click="login">登录</van-button>
  <br>
      <input type="checkbox" checked class="sure">
      <div class="xieyi">我已阅读 <a href="#">《用户协议》</a>并同意</div>
     </div>
    </div>
  </template>
  
  <script>
  import {passwordLogin} from '@/api/guanli/login'
//   let Base64 = require('js-base64').Base64; // 引入
  export default {
  name:"login",
  data() {
    return {
      account:'',//账号
      password:'',//密码
    }
   },
    methods:{
    async login(){
      //调用登录接口，把数据传到接口
      // let password=Base64.encode(this.password) //对用户输入的密码加密完传到后台
      console.log(this.account,this.password);
      await passwordLogin(this.account,this.password).then((res)=>{
        console.log(res);
       this.$store.commit('user/setUserInfo',res.data)
      }).catch((err)=>{
        console.log(err);
      })
      this.$router.push('/stuguan')
      this.$toast('登录成功')
    }
    }
  }
  </script>
  
  <style lang="less" scoped>
  
  .home-header{
     width: 100%;
     height: 30px;
     background-color: rgb(10, 135, 245);
     h3{
         text-align: center;
         color: aliceblue;
         padding-top: 5px;
     }
     
  }
  h2{
  display: inline-block;
  margin-left: 30px;
  margin-top: 20px;
  }
  .middle{
   p{
     margin-left: 30px;
     margin-top: 10px;
     font-size: 15px;
     color: #b4aeae;
   }
   img{
     margin-left: 125px;
     margin-top: 50px;
     width: 120px;
     height: 120px;
     border-radius: 50px;
   }
   label{
   font-size: 15px;
   margin-left: 65px;
    input{
      margin-top: 40px;
      border: 0;
      border-bottom: 1px solid #b4aeae;
    }
   }
  }
  .van-button--primary {
    margin-left: 130px;
   width: 90px;
   height: 40px;
   margin-top: 50px;
  }
  .bottom{
    input{
      width: 10px;
      height: 10px;
      margin-left: 80px;
      margin-top: 30px;
    }
    .sure{
      border-radius: 10px;
    }
    .xieyi{
      color: #b4aeae;
      margin-top: -15px;
      margin-left: 100px;
    }
  }
  .van-cell{
    margin-left: 20px;
  }
  </style>